<template>
    <h3>考试分类</h3>
    <div class="category-form">
        <div class="opt">
            <!-- 路径、取消自动上传、点击文件列表中已上传的文件时的钩子、文件列表移除文件时的钩子-->
            <el-button type="danger" plain @click="photoDeleteFn(imageUrl)">删除图片</el-button>
            <el-upload class="upload-demo" drag action="#" :auto-upload="false" :on-change="chooseImge">
                <!-- <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                <div class="el-upload__text">
                    拖拽上传 <em>点击上传</em>
                </div> -->
                <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                <el-icon v-else class="avatar-uploader-icon">
                    <Plus />
                </el-icon>

            </el-upload>
            <el-input v-model="input" style="width: 300px;" placeholder="请输入考试分类名称" />
        </div>
        <div>
            <el-button @click="addCategoryFn" type="primary">添加考试分类</el-button>
        </div>
    </div>
    <!-- 表格 -->
    <div class="category-table">
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="id" width="180" />
            <el-table-column prop="text" label="分类名称" width="180" />
            <!-- 图标 -->
            <el-table-column label="图标" width="180">
                <template #default="scope">
                    <!-- scope.row.icon -->
                    <img :src="api.url + scope.row.icon">
                </template>
            </el-table-column>
            <!-- 编辑 -->
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                        编辑
                    </el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script setup lang="ts">
import { UploadFilled, Timer } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { photoUpload, photoDelete, category_add, category_list, category_remove } from '../../api/request'
import { ElMessage, ElMessageBox } from 'element-plus';
import api from '../../api/index'
// 数据..................................................
// 地址
const url = api.url
// 输入框
const input = ref('')
// 传输的图片的路径
const imageUrl = ref('')
// 放回数据库的图片
const pic = ref('')

// 考试分类列表.............................................

// 考试分类列表
const tableData = ref([])
// 获取分类列表方法
const categoryListFn = async () => {
    await category_list()
        .then(content => {
            if (content.code == 200) {
                tableData.value = content.result;
            }

        })
}
categoryListFn();

// 上传图片。。。。。。。。。。。。。。。。。。。。。。。。。。
const chooseImge = async (file: any) => {
    // console.log('--->',file);
    if (file) {
        // formData对象 创建表单实例
        let fd = new FormData()
        fd.append('photo', file.raw)
        // 调用上传图片的方法
        await photoUpload(fd)
            .then(
                content => {
                    let { code, picUrl } = content;
                    // 拿到的路径后面多了个";"，删除掉
                    pic.value = picUrl.slice(0, -1);
                    if (code == 200) {
                        imageUrl.value = `${url}${pic.value}`;
                    }
                    else {
                        ElMessage.error(content.msg);
                    }

                }
            )
    }
}
// 删除图片.................................................
const photoDeleteFn = async (picUrl: string) => {
    // 参数图片路径
    await photoDelete({ picUrl })
        .then(content => {
            if (content.code == 200) {
                // 删除成功清空路径
                imageUrl.value = "";
            }
        })
}
// 添加考试分类....................................................
const addCategoryFn = async () => {
    let text = input.value;
    let icon = pic.value
    // 提醒用户不能空
    if (text == '' || icon == '') {
        ElMessage.error("缺少参数~~请放入图片并输入分类名")
        return false;
    }
    await category_add({ text, icon })
        .then(content => {
            if (content.code == 200) {
                ElMessage.success(content.msg)
                // 成功重置表单
                input.value = "";
                imageUrl.value = "";
                pic.value = "";
                categoryListFn();
            }
            else {
                ElMessage.error(content.msg)
            }
        })
}

// 编辑分类
const handleEdit = (index: number, row: any) => {
    // console.log(index, row)
}
//删除分类...........................................................
// 方法
const categoryRemoveFn = async (id: any) => {
    await category_remove(id)
}
// 点击删除分类
const handleDelete = (index: number, row: any) => {
    // console.log(index, row.id)
    ElMessageBox.confirm('确定删除找个分类吗?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
    )
        .then(() => {
            // 删除分类
            categoryRemoveFn({ id: row.id });
            ElMessage.success("删除成功")
            // 成功后获取一次列表，减少手动刷新
            categoryListFn();
        })
        .catch(() => {
            return false;
        })
}

</script>

<style lang="scss" scoped>
.category-form {
    .opt {
        margin-top: 10px;
        margin-bottom: 10px;

        .upload-demo {
            margin-top: 10px;
            width: 200px;

            .avatar {
                max-height: 100px;
            }

            .el-upload-list {
                display: none;
            }
        }
    }
}

.category-table {
    height: 300px;
    overflow: auto;

    img {
        height: 50px;
    }
}
</style>